/* THEMES.CSS
 *	This file is meant to define overall theming of the site.
 *	Users can choose a theme for themselves and any accounts they have proxy access to.
 *	These themes provide subtle variations to help distinguish which account is being accessed.
 *	This file should not be used to restyle static color choices across the site - that's in colors.css.
 */
 
/* Proxy Color Picker Layout */
.section .content select.colorpicker {
	display: inline-block;
	margin: 0;
	vertical-align: middle;
}

.section .content .colorpreview {
	display: inline-block;
	height: 1.25rem;
	margin: 0 0 0 0.25rem;
	vertical-align: middle;
	width: 1.25rem;
}


/* Proxy Switcher Colors 
 * These colors impact the proxy icons, menus, and header.
 * They are used to provide the context of which proxy record is being accessed.
 * They do not impact the background image or colors of the main content of the page (except for hovers).
*/
/* Color 1 - Skylight */
img.photo.color1,
.colorpreview.color1,
#proxies .color1:after,
body.color1 #header .menugroup.selected .menuicon:after {
	background-color: #3A9BE5;
}

.color1 > .userPhoto,
#proxies .color1 .proxyicon,
#proxies a.color1 .proxyicon {
	background-color: #3A9BE5;
	border-color: #3A9BE5;
}

body.color1 #header .menugroup li a:not(.button):focus,
body.color1 #header .menugroup li a:not(.button):hover,
body.color1 #localeswitch #morelocales li a:not(.button):hover {
	background-color: #D2EBFE;
}

/* Color 2 - Forest */
img.photo.color2,
.colorpreview.color2,
#proxies .color2:after,
body.color2 #header .menugroup.selected .menuicon:after {
	background-color: #3FA94B;
}

.color2 > .userPhoto,
#proxies .color2 .proxyicon,
#proxies a.color2 .proxyicon {
	background-color: #3FA94B;
	border-color: #3FA94B;
}

body.color2 #header .menugroup li a:not(.button):focus,
body.color2 #header .menugroup li a:not(.button):hover,
body.color2 #localeswitch #morelocales li a:not(.button):hover {
	background-color: #CAF3CF;
}

/* Color 3 - Bubblegum */
img.photo.color3,
.colorpreview.color3,
#proxies .color3:after,
body.color3 #header .menugroup.selected .menuicon:after {
	background-color: #DF66D5;
}

.color3 > .userPhoto,
#proxies .color3 .proxyicon,
#proxies a.color3 .proxyicon {
	background-color: #DF66D5;
	border-color: #DF66D5;
}

body.color3 #header .menugroup li a:not(.button):focus,
body.color3 #header .menugroup li a:not(.button):hover,
body.color3 #localeswitch #morelocales li a:not(.button):hover {
	background-color: #FFCCFB;
}

/* Color 4 - Royal */
img.photo.color4,
.colorpreview.color4,
#proxies .color4:after,
body.color4 #header .menugroup.selected .menuicon:after {
	background-color: #AE77E5;
}

.color4 > .userPhoto,
#proxies .color4 .proxyicon,
#proxies a.color4 .proxyicon {
	background-color: #AE77E5;
	border-color: #AE77E5;
}

body.color4 #header .menugroup li a:not(.button):focus,
body.color4 #header .menugroup li a:not(.button):hover,
body.color4 #localeswitch #morelocales li a:not(.button):hover {
	background-color: #EBD6FF;
}

/* Color 5 - Ocean */
img.photo.color5,
.colorpreview.color5,
#proxies .color5:after,
body.color5 #header .menugroup.selected .menuicon:after {
	background-color: #0DA798;
}

.color5 > .userPhoto,
#proxies .color5 .proxyicon,
#proxies a.color5 .proxyicon {
	background-color: #0DA798;
	border-color: #0DA798;
}

body.color5 #header .menugroup li a:not(.button):focus,
body.color5 #header .menugroup li a:not(.button):hover,
body.color5 #localeswitch #morelocales li a:not(.button):hover {
	background-color: #CFF2EE;
}

/* Color 6 Goldenrod */
img.photo.color6,
.colorpreview.color6,
#proxies .color6:after,
body.color6 #header .menugroup.selected .menuicon:after {
	background-color: #BA8B00;
}

.color6 > .userPhoto,
#proxies .color6 .proxyicon,
#proxies a.color6 .proxyicon {
	background-color: #BA8B00;
	border-color: #BA8B00;
}

body.color6 #header .menugroup li a:not(.button):focus,
body.color6 #header .menugroup li a:not(.button):hover,
body.color6 #localeswitch #morelocales li a:not(.button):hover {
	background-color: #EDDDAB;
}

/* Color 7 - Autumn */
img.photo.color7,
.colorpreview.color7,
#proxies .color7:after,
body.color7 #header .menugroup.selected .menuicon:after {
	background-color: #EC7224;
}

.color7 > .userPhoto,
#proxies .color7 .proxyicon,
#proxies a.color7 .proxyicon {
	background-color: #EC7224;
	border-color: #EC7224;
}

body.color7 #header .menugroup li a:not(.button):focus,
body.color7 #header .menugroup li a:not(.button):hover,
body.color7 #localeswitch #morelocales li a:not(.button):hover {
	background-color: #FFD0B3;
}

/* Menu Icons */
body.color1 #menu .menuicon:before {
	background-position: center 0;
}

body.color2 #menu .menuicon:before {
	background-position: center -2rem;
}

body.color3 #menu .menuicon:before {
	background-position: center -4rem;
}

body.color4 #menu .menuicon:before {
	background-position: center -6rem;
}

body.color5 #menu .menuicon:before {
	background-position: center -8rem;
}

body.color6 #menu .menuicon:before {
	background-position: center -10rem;
}

body.color7 #menu .menuicon:before {
	background-position: center -12rem;
}